import React, { Component } from 'react'
import styles from './index.less'
import Authorized, {havePermission} from '@/utils/Authorized';
import { Input, Divider, Button, Modal, Tree  } from 'antd';
import { errNotification } from '@/utils/notification';
const Search = Input.Search;
const { TreeNode } = Tree;


export default class Query extends Component {
    state = {
        visible: false, //modal显示
        selected: [],
        roleName: ''
    }
    //modal确定
    handleOk = (e) => {
        if(this.state.roleName === ''){
            errNotification("角色名不能为空","")
        }else{
            const { dispatch } = this.props
            dispatch({
                type: 'role/fetchAddRole',
                payload: {
                    roleName: this.state.roleName,
                    authIds: this.state.selected,
                    page:1
                }
            })
        }
    }
    //modal取消
    handleCancel = (e) => {
        const { dispatch } = this.props
        dispatch({
            type: 'role/addRoleViewShow',
            payload: {
                addViewShow: false
            }
        })
    }
    //树形选择框点击回调
    onCheck = (checkedKeys, info) => {
        let list = info.checkedNodesPositions.map((item) => {
            if(this.getPlaceholderCount(item.pos)>2){
                return item.node.key
            }
        })
        list = list.filter((item)=>{
            if(item){
                return item
            }
        })
        console.log("集合",list)
        this.setState({
            selected: list
        })
    }
    //字符串计数
    getPlaceholderCount = (strSource) =>{
        //统计字符串中包含'-'的个数
        var thisCount = 0;
        strSource.replace(/\-|\{\}/g, function (m, i) {
            //m为找到的{xx}元素、i为索引
            thisCount++;
        });
        return thisCount;
    }

    render() {
        const { dispatch, authGroupList, addViewShow } = this.props
        const loop2 = data => data.map((item) => {
            return <TreeNode key={item.id} title={item.name}/>
        })

        const loop = (data) => data.map((item) => {
            if (item.authGroupList) {
                return (
                  <TreeNode key={item.id} title={item.name}>
                    {loop(item.authGroupList)}
                  </TreeNode>
                );
            }
            return (
                <TreeNode key={item.id} title={item.name}>
                    {loop2(item.authList)}
                </TreeNode>
            )
        })
        return (
            <div className = {styles.query}>
                <Search className = {styles.search}
                    placeholder="角色名"
                    onSearch={(value) => {
                        dispatch({
                            type: 'role/fetchSelRoleAll',   
                            payload: {page:1, roleName:value}
                        })
                    }}
                    enterButton = {true}
                />
                <Authorized authority={havePermission("AUTH_SMSROLE_ADD")}>
                    <Button type="primary" onClick = {()=>{
                        dispatch({
                            type: 'role/addRoleViewShow',
                            payload: {
                                addViewShow: true
                            }
                        })
                        }}>添加角色</Button>
                </Authorized>
                {addViewShow && <Modal
                        title="添加角色"
                        visible={addViewShow}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        okText="确认"
                        cancelText="取消">
                    <Input 
                        placeholder="角色名" 
                        onChange = {(e)=>{
                            this.setState({
                                roleName: e.target.value
                            })
                        }}
                    />
                    <Tree
                        checkable={true}
                        defaultExpandAll={true}
                        showLine={true}
                        onCheck={this.onCheck}
                        >
                        {loop(authGroupList)}
                    </Tree>
                </Modal>}
            </div>
        )
    }
}
